<script setup lang="ts">
import { ref, onMounted } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import { useColumns } from "./utils/columns";
import { crudType } from "./utils/data";
const { columns, onSearch, dataList, menuOptions, moduleName } = useColumns();
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: 0,
    table_name: "",
    table_comment: "",
    module_name: "",
    remark: "",
    belong_menu_id: 0,
    columns: [],
    type: "",
    menu_name: "",
    package_name: "",
    generate_type: 0,
    generate_menus: [],
    build_menu: 0,
    component_type: 0
  })
});

const ruleFormRef = ref();
const higherMenuOptions = ref([]);

const newFormInline = ref(props.formInline);
setTimeout(() => {
  newFormInline.value.columns = dataList.value;
  higherMenuOptions.value = menuOptions.value;
}, 500);

const activeName = ref("first");

const belongMenu = [];
function getRef() {
  return ruleFormRef.value;
}

onMounted(async () => {
  onSearch(newFormInline.value.id);
});

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="82px"
  >
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="配置信息" name="first">
        <el-divider content-position="left">基础信息</el-divider>
        <el-row :gutter="20">
          <el-col :span="12"
            ><el-form-item label="表名称" prop="table_name">
              <el-input
                v-model="newFormInline.table_name"
                disabled
              /> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="表描述" prop="table_comment">
              <el-input
                v-model="newFormInline.table_comment"
                clearable
              /> </el-form-item
          ></el-col>
          <el-col :span="24"
            ><el-form-item label="备注信息" prop="remark">
              <el-input
                v-model="newFormInline.remark"
                clearable
                :rows="2"
                type="textarea"
              /> </el-form-item
          ></el-col>
          <el-divider content-position="left">生成信息</el-divider>
          <el-col :span="12">
            <el-form-item label="所属模块">
              <el-select
                v-model="newFormInline.module_name"
                placeholder="请选择所属模块"
                class="w-full"
                clearable
              >
                <el-option
                  v-for="(item, index) in moduleName"
                  :key="index"
                  :label="item.name"
                  :value="item.val"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属菜单">
              <el-cascader
                v-model="newFormInline.belong_menu_id"
                class="w-full"
                :options="higherMenuOptions"
                :props="{
                  value: 'id',
                  label: 'title',
                  emitPath: false,
                  checkStrictly: true
                }"
                clearable
                filterable
                placeholder="请选择上级菜单"
              >
                <template #default="{ node, data }">
                  <span>{{ data.title }}</span>
                  <span v-if="!node.isLeaf">
                    ({{ data.children.length }})
                  </span>
                </template>
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生成类型">
              <el-select
                v-model="newFormInline.type"
                placeholder="请选择类型"
                class="w-full"
                clearable
              >
                <el-option
                  v-for="(item, index) in crudType"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12"
            ><el-form-item label="菜单名称" prop="menu_name">
              <el-input
                v-model="newFormInline.menu_name"
                clearable
              /> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="包名" prop="package_name">
              <el-input
                v-model="newFormInline.package_name"
                clearable
              /> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="生成方式" prop="generate_type">
              <el-radio-group v-model="newFormInline.generate_type">
                <el-radio-button :value="1">压缩包下载</el-radio-button>
                <el-radio-button :value="2">生成到目录</el-radio-button>
              </el-radio-group>
            </el-form-item></el-col
          >
          <el-col :span="12"
            ><el-form-item label="组件样式" prop="component_type">
              <el-radio-group v-model="newFormInline.component_type">
                <el-radio-button :value="1">模态框</el-radio-button>
                <el-radio-button :value="2">抽屉</el-radio-button>
              </el-radio-group>
            </el-form-item></el-col
          >
          <el-col :span="12"
            ><el-form-item label="构建菜单" prop="build_menu">
              <el-radio-group v-model="newFormInline.build_menu">
                <el-radio-button :value="1">不构建菜单</el-radio-button>
                <el-radio-button :value="2">构建菜单</el-radio-button>
              </el-radio-group></el-form-item
            ></el-col
          >
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="字段配置" name="second">
        <pure-table
          row-key="id"
          align-whole="center"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
          }"
          :data="newFormInline.columns"
          :columns="columns"
        />
      </el-tab-pane>
      <el-tab-pane label="菜单配置" name="third">
        <el-row>
          <el-checkbox-group v-model="newFormInline.generate_menus">
            <el-col :span="24">
              <el-checkbox
                label="新增 - 勾选生成新增数据按钮菜单及接口"
                value="save"
            /></el-col>
            <el-col :span="24">
              <el-checkbox
                label="更新 - 勾选生成更新数据按钮菜单及接口"
                value="update"
            /></el-col>
            <el-col :span="24">
              <el-checkbox
                label="读取 - 勾选生成读取数据按钮菜单及接口"
                value="read"
            /></el-col>
            <el-col :span="24">
              <el-checkbox
                label="删除 - 勾选生成真实删除按钮菜单及接口"
                value="delete"
            /></el-col>
          </el-checkbox-group>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-form>
</template>

<style lang="css">
.el-input-number--small {
  line-height: 22px;
  width: 80px;
}
</style>
